<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>

	<body>
		<!--基本的警告框-->
		<div class="container">
			<div class="alert alert-success">成功！很好地完成了提交。</div>
			<div class="alert alert-info">信息！请注意这个信息。</div>
			<div class="alert alert-warning">警告！请不要提交。</div>
			<div class="alert alert-danger">错误！请进行一些更改。</div>
		</div>
		
		<!--可取消的警告框-->
		<div class="container">
			<div class="alert alert-success alert-dismissable">
				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
      				&times;<!--转义成×-->
   				</button>
				成功！很好地完成了提交。
			</div>
			<div class="alert alert-info alert-dismissable">
				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
      				&times;<!--转义成×-->
   				</button>
				信息！请注意这个信息。
			</div>
			<div class="alert alert-warning alert-dismissable">
				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
      				&times;<!--转义成×-->
   				</button>
				警告！请不要提交。
			</div>
			<div class="alert alert-danger alert-dismissable">
				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
      				&times;<!--转义成×-->
   				</button>
				错误！请进行一些更改。
			</div>
		</div>
		
		<!--警告框中的链接-->
		<div class="container">
			<div class="alert alert-success">
				<a href="#" class="alert-link">成功！很好地完成了提交。</a>
			</div>
			<div class="alert alert-info">
				<a href="#" class="alert-link">信息！请注意这个信息。</a>
			</div>
			<div class="alert alert-warning">
				<a href="#" class="alert-link">警告！请不要提交。</a>
			</div>
			<div class="alert alert-danger">
				<a href="#" class="alert-link">错误！请进行一些更改。</a>
			</div>
		</div>
		
	</body>
</html>